<template>
  <div>
    <div class="tip_text">
      <el-card>
        <div class="el_card">
          <div style="display: flex; align-items: center">
            <span
              >引导文本：<span v-if="!guideTextBtn">{{
                params.title
              }}</span></span
            >
            <div>
              <el-input
                v-if="guideTextBtn"
                v-model="params.title"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <el-button
            size="mini"
            round
            type="primary"
            @click="guideTextBtn = !guideTextBtn"
            >{{ guideTextBtn ? "保存" : "编辑" }}</el-button
          >
        </div>
      </el-card>
    </div>

    <div class="boon_content">
      <draggable
        v-model="tableData"
        :options="{ filter: '.undrag' }"
        @change="draggableChange"
      >
        <div
          class="boon_content_item"
          v-for="(item, index) in tableData"
          :key="item.id"
        >
          <el-card>
            <div class="item_box">
              <div class="left">
                <img :src="fileBaseUrl + item.iconUrl" />
                <div class="text_box">
                  <div class="title">{{ item.rights }}</div>
                  <div class="text">{{ item.rightsText }}</div>
                </div>
              </div>
              <div class="right">
                <el-button size="mini" type="danger" @click="del(index)" round
                  >删除</el-button
                >
                <el-button size="mini" round>拖拽排序</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </draggable>
    </div>

    <DialogBoon ref="DialogBoon" />
  </div>
</template>

<script>
import draggable from "vuedraggable";
import DialogBoon from "./DialogBoon.vue";
import { openCardBoonList } from "@/api/vip";
import { mapGetters } from "vuex";
export default {
  components: {
    DialogBoon,
    draggable,
  },
  data() {
    return {
      params: {
        title: "开通立得高额现金券",
        ids: [],
      },
      guideTextBtn: false,
      tableData: [],
    };
  },
  watch: {
    watchChange({ title, ids }) {
      this.fetchData(true);
    },
  },
  computed: {
    ...mapGetters(["fileBaseUrl", "activePageForm"]),
    watchChange() {
      const { title, ids } = this.params;
      return { title, ids };
    },
  },
  mounted() {
    const { biz } = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
    this.fetchData(!!!biz?.params)
    this.$bus.$on("__CARDBOON", this.__CARDBOON);
  },
  destroyed() {
    this.$bus.$off("__CARDBOON");
  },
  methods: {
    __CARDBOON() {
      const DialogBoon = this.$refs.DialogBoon;
      DialogBoon.open(this.params.ids).then((res) => {
        this.tableData = res;
        this.params.ids = res.map((item) => item.id);
      });
    },
    del(ind) {
      this.tableData = this.tableData.filter((item, index) => index !== ind);
      this.params.ids = this.tableData.map((item) => item.id);
    },
    fetchData(set = false) {
      let { biz } = this.activePageForm.modules[this.activePageForm.activeModuleIndex];
      if(set) {
        biz.params = JSON.parse(JSON.stringify(this.params))
        this.$store.dispatch('setActivePageForm', JSON.parse(JSON.stringify(this.activePageForm)))
        return
      }
      if (biz?.params) {
        typeof biz.params === 'string' && (biz.params = JSON.parse(biz.params))
        this.params = JSON.parse(JSON.stringify(biz.params))
        this.getOpenCardBoonList()
      }
    },
    getOpenCardBoonList() {
      openCardBoonList({idList: this.params.ids}).then((res) => {
        this.tableData = res.data
        this.params.ids = this.tableData.map((item) => item.id);
      });
    },
    draggableChange() {
      this.params.ids = this.tableData.map((item) => item.id);
    },
  },
};
</script>


<style lang="scss" scoped>
.tip_text {
  margin-top: 20px;
  /deep/.el_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.boon_content {
  margin-top: 20px;

  .boon_content_item {
    margin-top: 10px;
    .item_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        img {
          height: 25px;
          width: 25px;
          margin-right: 10px;
        }
        .text_box {
          .text {
            margin-top: 5px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
